<template>
  <el-card class="box-card">
    <div class="text item">
      <el-select
        v-model.trim="newValue"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择产品标签"
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
  </el-card>
</template>

<script>
import { getDouHao } from '@/utils/util'
export default {
  props: {
    options: {
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    value: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      tag: []
    }
  },
  computed: {
    newValue: {
      get() {
        return getDouHao(this.value, [])
      },
      set(value) {
        this.$emit('input', value.join(','))
      }
    }
  },
  methods: {
    handleAdd() {
      if (this.tag.length > 0) {
        for (let i = 0; i < this.tag.length; i++) {
          if (this.newValue.includes(this.tag[i])) {
            this.$message({
              type: 'error',
              message: '标签内已经包含' + this.tag[i]
            })
          } else {
            this.newValue.push(this.tag[i])
          }
        }
        this.emitParent()
        this.tag = ''
      } else {
        this.$message({
          type: 'error',
          message: '添加标签不能为空'
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
    .el-input-group{
        margin-bottom: 20px;
    }
    .el-tag{
        margin: 10px 10px 0 0;
    }
    .el-select{
    width: 100%;
  }
</style>
